<template>
    <div class="feedback-detail">
        <div class="feedback-detail-main">
            <div class="header">
                <div class="header-left">
                    <div class="avatar">
                        <yowin-img :src="vueState.pageInfo.avatar"></yowin-img>
                    </div>
                    <div class="info">
                        <div class="name">{{vueState.pageInfo.nickName}}</div>
                        <div class="time">{{formatDate(feedbackItem?.createTime || 0)}}</div>
                    </div>
                </div>
            </div>
            <div class="main">{{feedbackItem?.feedBack}}</div>
        </div>
        <div class="feedback-detail-reply">
            <ul class="feedback-detail-reply-list">
                <li v-for="(item,index) in feedbackItem?.children" :key="index" class="feedback-detail-reply-list-item">
                    <div class="header">
                        <div class="avatar">
                            <img v-if="item.uid === 0" :src="csrAvatar" alt="">
                            <yowin-img v-else :src="vueState.pageInfo.avatar"></yowin-img>
                        </div>
                        <div class="info">
                            <div class="name">{{item.uid === 0 ? 'Yowin CSR' : vueState.pageInfo.nickName}}<span v-if="!item.uid" class="tag">CSR</span></div>
                            <div class="time">{{formatDate(item.createTime)}}</div>
                        </div>
                    </div>
                    <div class="main">{{item.feedBack}}</div>
                </li>
            </ul>
        </div>
        <div class="feedback-detail-input" :style="{bottom:(vueState.pageStyle.tabBarHeight || 0) + 'px'}" >
            <input v-model="feedbackInput" type="text" :placeholder="$t('Write reply')">
            <div class="button" @click="debounce(feedbackGroup(),500)">{{$t('Submit')}}</div>
        </div>
    </div>
</template>
<script>
import { inject, onMounted, toRefs } from 'vue'
import {useFeedback} from './components/useFeedback.js'
import {formatDate,debounce} from '@@/utils/common.js'
import csrAvatar from '../../../assets/images/csr_avatar.png'
export default {
    props:{
        item:{
            default:JSON.stringify({})
        }
    },
    setup(props) {
        const {feedbackItem,feedbackGroup,state,setReaded} = useFeedback()
        const vueState = inject('vueState')
        onMounted(()=>{
            setReaded(feedbackItem.value)
        })
        return {
            ...toRefs(state),
            vueState,
            feedbackItem,
            formatDate,
            feedbackGroup,
            csrAvatar,
            debounce
        }
    }
}
</script>
<style lang="less" scoped>

.feedback-detail{
    height: 100%;
    background-color: #FAFBFC;
    overflow-y: auto;
    .avatar{
        height:.42rem;
        width: .42rem;
        border-radius: 50%;
        margin-right: .08rem;
        img{
            height: 100%;
            width: 100%;
            display: block;
        }
    }
    .info{
        .name{
            font-size: .14rem;
            font-weight: 700;
            color:#121314;
            line-height: .24rem;
        }
        .time{
            font-size: .12rem;
            font-weight: 400;
            line-height: .2rem;
            color: #9C9DA6;
        }
    }
    &-main{
        background-color: white;
        padding: .16rem;
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            &-left{
                display: flex;
                align-items: center;
            }
        }
        .main{
            margin-top: .08rem;
            font-size: .14rem;
            font-weight: 400;
            color: #121314;
            line-height: .24rem;
            word-break: break-all;
        }
    }
    &-reply{
        padding: 0 .16rem .5rem .48rem;
        &-list{
            &-item{
                padding: .16rem 0;
                border-bottom: .01rem solid #EDEDEF;
                .header{
                    display: flex;
                    align-items: center;
                    .name{
                        display: flex;
                        align-items: center;
                    }
                    .tag{
                        margin-left: .04rem;
                        height:.14rem;
                        width: .28rem;
                        background-color:#F5B53F;
                        font-size: .1rem;
                        color: white;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: .03rem;
                    }
                }
                .main{
                    margin-top: .08rem;
                    font-size: .14rem;
                    font-weight: 400;
                    color: #121314;
                    line-height: .24rem;
                    word-break: break-all;
                }
            }
        }
    }
    &-input{
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: .1rem .12rem;
        background-color: white;
        box-shadow: 0 -.08rem .16rem 0 rgba(10,36,99,0.02); 
        display: flex;
        input{
            width: 100%;
            padding-left: .04rem;
            display: block;
            border: none;
            outline: none;
            font-size: .14rem;
            line-height: .24rem;
            &::placeholder{
                color:#9C9DA6;
            }
        }
        .button{
            flex-shrink: 0;
            .unique-button();
            height: .32rem;
            width:.75rem;
            font-size: .14rem;
            color: white;
            box-shadow: none;
            margin-left: .04rem;
        }
    }
}
</style>